<template>
  <div class="simplify">
    <el-card class="box-card">
      <el-table :border="true"
                :data="tableData.filter(data => !search || data.metaData.contName.toLowerCase().includes(search.toLowerCase()))"
                stripe
                class="simplify__table"
                style="width: 100%">
        <el-table-column
          label="编号"
          prop="_id"/>
        <el-table-column
          label="用户名"
          prop="metaData.contName"/>
        <el-table-column
          label="手机号码"
          prop="metaData.contPhone"/>
        <el-table-column
          label="邮箱"
          prop="metaData.contEmail"/>
        <el-table-column
          label="学校"
          prop="metaData.schoolName"/>
        <el-table-column
          label="院系"
          prop="metaData.deptName"/>
        <el-table-column
          label="填写时间"
          prop="metaData.writeData"/>
        <el-table-column
          label="状态">
          <template slot-scope="scope">
            {{ (scope.row.metaData.status === 0) ? '未提交' : '已提交' }}
          </template>
        </el-table-column>
        <el-table-column
          width="210px"
          align="left">
          <template slot="header">
            <input v-model="search"
                   class="selectInput"
                   type="text"
                   placeholder="输入用户名搜索">
          </template>

          <template slot-scope="scope">
            <el-button
              class="editButton"
              size="mini"
              @click="handleDetail(scope.$index, scope.row)">
              详情
            </el-button>
            <el-button
              class="prohibitButton"
              size="mini"
              :plain="true"
              @click="handleBack(scope.$index, scope.row)">
              {{ disabledText }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import api from '@/api/user'

export default {
  inject: ['reload'],
  data () {
    return {
      tableData: [],
      search: '',
      disabledText: '打回',
      page: 1,
      page_count: 0
    }
  },
  created () {
    this.getPage()
  },
  mounted () {
    sessionStorage.removeItem('show')
    sessionStorage.removeItem('_id')
    this.getData()
  },
  methods: {
    // 获取初始数据
    async getData () {
      try {
        const res = await api.getSimplifyData(this.page)
        this.tableData = []
        const { code, result } = res
        if (code == 200 && result) {
          this.tableData.push(...result)
        }
        if (this.page < this.page_count) {
          this.onLoad()
        }
      } catch (err) {
        // console.log(err)
      }
    },
    onLoad () {
      this.page = this.page + 1
      this.getData()
    },
    handleDetail (index, row) {
      sessionStorage.setItem('show', 1)
      sessionStorage.setItem('_id', row._id)
      this.$router.push({
        name: '1-0-1'
      })
    },
    // 打回
    async handleBack (index, row) {
      if (row.metaData.status == 0) {
        this.$message({
          message: '用户未提交！',
          type: 'warning'
        })
      } else {
        const res = await api.putUpdateStatus(row._id, 1)
        if (res.code == 200) {
          this.$message({
            message: '打回成功！',
            type: 'success'
          })
          this.reload()
        }
      }
    },
    async getPage () {
      const res = await api.getDataPage()
      this.page_count = res.result
    }
  }
}
</script>

<style lang="less" scoped>
.simplify {
  padding: 30px;
  .selectInput {
    padding-left: 8px;
    border: 1px solid #dcdfe6;
    border-radius: 3px;
    outline: none;
    font-size: 14px;
    width: 188px;
  }
  .selectInput:focus {
    border: 1px solid #409eff;
  }
  .editButton {
    margin-left: 25px;
  }
  .prohibitButton {
    margin-left: 30px;
  }
}
</style>
